// hotel-management-frontend/src/components/Layout.js

import React from "react";
import { Layout, Menu } from "antd"; // Button 已在代码中，但未从antd解构，此处修正
import { Link, useLocation } from "react-router-dom";
import {
  DashboardOutlined,
  HomeOutlined,
  UserOutlined,
  CalendarOutlined,
  BarChartOutlined,
  UploadOutlined,
  BookOutlined,
  InfoCircleOutlined,
  SwapOutlined,
  ShoppingOutlined,
} from "@ant-design/icons";

const { Header, Content, Sider } = Layout;

const AppLayout = ({ children, isAdmin }) => {
  const location = useLocation();

  const getSelectedKey = () => {
    if (isAdmin) {
      if (location.pathname.startsWith("/admin/dashboard")) return "dashboard";
      if (location.pathname.startsWith("/admin/rooms")) return "rooms";
      if (location.pathname.startsWith("/admin/guests")) return "guests";
      if (location.pathname.startsWith("/admin/checkins")) return "checkins";
      if (location.pathname.startsWith("/admin/statistics"))
        return "statistics";
      if (location.pathname.startsWith("/admin/bulk-import"))
        return "bulk-import";
      if (location.pathname.startsWith("/admin/menu-items"))
        return "menu-items";
      return "dashboard";
    } else {
      if (
        location.pathname.startsWith("/client/history") ||
        location.pathname === "/"
      )
        return "client-history";
      if (location.pathname.startsWith("/client/profile"))
        return "client-profile";
      return "client-history";
    }
  };

  const adminMenuItems = [
    {
      key: "dashboard",
      icon: <DashboardOutlined />,
      label: <Link to="/admin/dashboard">仪表盘</Link>,
    },
    {
      key: "rooms",
      icon: <HomeOutlined />,
      label: <Link to="/admin/rooms">房间管理</Link>,
    },
    {
      key: "guests",
      icon: <UserOutlined />,
      label: <Link to="/admin/guests">客户管理</Link>,
    },
    {
      key: "checkins",
      icon: <CalendarOutlined />,
      label: <Link to="/admin/checkins">入住管理</Link>,
    },
    {
      key: "statistics",
      icon: <BarChartOutlined />,
      label: <Link to="/admin/statistics">统计分析</Link>,
    },
    {
      key: "bulk-import",
      icon: <UploadOutlined />,
      label: <Link to="/admin/bulk-import">批量导入</Link>,
    },
    {
      key: "menu-items",
      icon: <ShoppingOutlined />,
      label: <Link to="/admin/menu-items">商品管理</Link>,
    },
  ];

  const clientMenuItems = [
    {
      key: "client-history",
      icon: <BookOutlined />,
      label: <Link to="/client/history">我的历史</Link>,
    },
    {
      key: "client-profile",
      icon: <InfoCircleOutlined />,
      label: <Link to="/client/profile">我的信息</Link>,
    },
  ];

  const switchModeItem = {
    key: "switch-mode",
    icon: <SwapOutlined />,
    label: isAdmin ? (
      <Link to="/client/history">切换到客户界面</Link>
    ) : (
      <Link to="/admin/dashboard">切换到管理员界面</Link>
    ),
  };

  const currentMenuItems = isAdmin
    ? [...adminMenuItems, { type: "divider" }, switchModeItem]
    : [...clientMenuItems, { type: "divider" }, switchModeItem];

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider collapsible collapsed={false}>
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[getSelectedKey()]}
          items={currentMenuItems}
        />
      </Sider>
      <Layout>
        {/* Updated headStyle to styles={{ header: ... }} for Antd v5 compatibility */}
        <Header styles={{ header: { padding: 0, background: "#fff" } }}>
          <div style={{ float: "right", marginRight: "24px" }}>
            <span style={{ marginRight: "10px" }}>
              {isAdmin ? "管理员模式" : "客户模式"}
            </span>
          </div>
        </Header>
        <Content style={{ margin: "0 16px" }}>
          <div style={{ padding: 24, minHeight: 360, background: "#fff" }}>
            {children}
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default AppLayout;
